<template>
  <div class="bg_view">
    <div class="progress_box">
      <div style="color: #5aadfb">上传证件</div>
      <div class="omit" style="color: #5aadfb">...</div>
      <div style="color: #5aadfb">选择病历</div>
      <div class="omit" style="color: #5aadfb">...</div>
      <div style="color: #5aadfb">填写信息</div>
      <div class="omit" style="color: #5aadfb">...</div>
      <div>支付押金</div>
    </div>
    <!-- <div class="flex_box">
      <div><span style="color: red">*</span> 复印份数</div>
      <div class="number">
        <img
          src="@/assets/jianshao@2x.png"
          alt=""
          @click="sub"
          v-if="qsdata.copiesNumber > 1"
        />
        <img src="@/assets/bukejian@2x.png" alt="" v-else />
        <div>{{ qsdata.copiesNumber }}</div>
        <img src="@/assets/zengjia@2x.png" alt="" @click="add" />
      </div>
    </div>
    <div class="xian"></div> -->
    <!-- <div class="flex_box">
      <div><span style="color: red">*</span>复印用途</div>
      <div @click="show1 = true">
        <input
          type="text"
          placeholder="请选择复印用途"
          v-model="qsdata.purpose"
          disabled
        /><img
          src="@/assets/img/right.png"
          alt=""
          style="width: 0.5rem; height: 0.8125rem; margin-left: 0.75rem"
        />
      </div>
    </div>
    <div class="area_box" v-if="qsdata.purpose == '其他'">
      <x-textarea
        v-model="otherPurpose"
        :height="100"
        placeholder="请输入其他用途…"
      ></x-textarea>
    </div> -->
    <div class="flex_box" style="margin-top: 0.625rem;">
      <div>备注</div>
    </div>
    <div class="area_box">
      <x-textarea
        v-model="qsdata.remark"
        :height="100"
        placeholder="请填写打印需求…"
      ></x-textarea>
    </div>
    <div class="address_box">
      <div class="add-info">
        <div class="main_title">
          <span></span>
          <div>邮寄地址</div>
        </div>
        <div class="add-info-flex">
          <div class="name">收件人</div>
          <input
            type="text"
            v-model="qsdata.expressReceiver"
            placeholder="请输入收件人名称"
          />
        </div>
        <div class="add-info-flex">
          <div class="name">手机号码</div>
          <input
            type="text"
            v-model="qsdata.expressPhone"
            placeholder="请输入手机号"
            maxlength="11"
          />
        </div>
        <div class="add-info-flex">
          <div class="name">所在地区</div>
          <x-address
            ref="address"
            title=""
            placeholder="请选择收获地址"
            v-model="addressValue"
            :list="addressData"
            value-text-align="right"
            @on-hide="onhide"
          ></x-address>
        </div>
        <div class="add-info-flex">
          <div class="name">详细地址</div>
          <input
            type="text"
            v-model="qsdata.expressAddress"
            placeholder="详细地址：如街道、门牌号、小区等"
          />
        </div>
      </div>
    </div>

    <!-- <div class="xian"></div>
    <div class="flex_box">
      <div>
        <span style="color: red">*</span>复印内容<span
          style="color: #a4adbe; font-size: 13px"
          >（可多选）</span
        >
      </div>
      <div></div>
    </div>
    <div class="content_box">
      <div
        v-for="(item, index) in checkedList"
        @click="checkedFun(index)"
        class="li"
        :class="{ active: item.high == true }"
      >
        {{ item.name }}
      </div>
    </div> -->

    <div class="next_box" @click="nextFun">
      <div>下一步</div>
    </div>
    <actionsheet
      v-model="show1"
      :menus="menus1"
      @on-click-menu="clickFun"
      :close-on-clicking-mask="false"
      show-cancel
    ></actionsheet>
  </div>
</template>
<script>
import { Actionsheet, XTextarea, ChinaAddressData, XAddress } from "vux";

export default {
  components: {
    Actionsheet,
    XTextarea,
    XAddress,
  },
  data() {
    return {
      active: null,
      tabItemShow: "0",
      addressData: ChinaAddressData,
      number: 1,
      show1: false,
      value: "",
      qsdata: {},
      otherPurpose: "",
      addressValue: [],
      checkedList: [
        {
          name: "主诉",
          high: false,
        },
        {
          name: "现病史",
          high: false,
        },
        {
          name: "既往史",
          high: false,
        },
        {
          name: "诊断结果",
          high: false,
        },
        {
          name: "治疗意见",
          high: false,
        },
        {
          name: "检验报告",
          high: false,
        },
        {
          name: "检查报告",
          high: false,
        },
        {
          name: "出院报告",
          high: false,
        },
      ],
      menus1: [
        "医保报销",
        "特殊病种",
        "慢病复诊",
        "司法诉讼",
        "转移病历",
        "新生儿报户口",
        "其他",
      ],
    };
  },
  created() {
    if (window.localStorage.getItem("otherPurpose")) {
      this.otherPurpose = window.localStorage.getItem("otherPurpose");
    }
    if (window.localStorage.getItem("addressArr")) {
      this.addressValue = JSON.parse(window.localStorage.getItem("addressArr"));
    }
    if (window.localStorage.getItem("copydata")) {
      var copydata = JSON.parse(window.localStorage.getItem("copydata"));
      this.qsdata = copydata;
    }
  },
  methods: {
    checkedFun(index) {
      // this.active=index
      this.checkedList[index].high = !this.checkedList[index].high;
    },
    clickFun(key, item) {
      console.log(key);
      console.log(item);
      this.qsdata.purpose = item;
    },
    tabItemClick(e) {
      this.tabItemShow = e;
    },
    onhide(changok) {
      if (changok == true) {
        console.log(this.$refs.address);
        console.log(this.addressValue);
        var addressName = this.$refs.address.nameValue.split(" ");
        console.log(addressName);
        this.qsdata.expressProvince = addressName[0];
        this.qsdata.expressCity = addressName[1];
        this.qsdata.expressArea = addressName[2];
      }
    },
    nextFun() {
      this.qsdata.copyModule = "";
      // this.checkedList.forEach((ele) => {
      //   if (ele.high == true) {
      //     if (this.qsdata.copyModule.length != 0) {
      //       this.qsdata.copyModule += "," + ele.name;
      //     } else {
      //       this.qsdata.copyModule += ele.name;
      //     }
      //   }
      // });

      // if (!this.qsdata.copiesNumber) {
      //   alert("复印份数不能为空");
      //   return;
      // }
      // if (!this.qsdata.purpose) {
      //   alert("复印用途不能为空");
      //   return;
      // }
      if (this.qsdata.purpose == "其他") {
        if (!this.otherPurpose) {
          alert("请输入其他用途");
          return;
        }
      }

      if (!this.qsdata.expressReceiver) {
        alert("收件人不能为空");
        return;
      }
      if (!this.qsdata.expressPhone) {
        alert("手机号不能为空");
        return;
      } else {
        if (!/^[1][3,4,5,6,7,8][0-9]{9}$/.test(this.qsdata.expressPhone)) {
          alert("请输入正确的手机号");
          return;
        }
      }
      if (!this.addressValue) {
        alert("邮寄地址不能为空");
        return;
      }
      if (!this.qsdata.expressAddress) {
        alert("详细地址不能为空");
        return;
      }

      // if (!this.qsdata.copyModule) {
      //   alert("复印内容不能为空");
      //   return;
      // }

      // window.localStorage.setItem(
      //   "copyModuleList",
      //   JSON.stringify(this.checkedList)
      // );
      window.localStorage.setItem("copydata", JSON.stringify(this.qsdata));
      window.localStorage.setItem(
        "addressArr",
        JSON.stringify(this.addressValue)
      );
      window.localStorage.setItem("otherPurpose", this.otherPurpose);
      this.$router.push({ path: "/acknowledgment_message" });
    },
    sub() {
      if (this.qsdata.copiesNumber > 0) {
        this.qsdata.copiesNumber--;
      }
    },
    add() {
      this.qsdata.copiesNumber++;
    },
  },
};
</script>
<style scoped>
.tab_box {
  width: calc(100% - 2rem);
  padding: 0 1rem;
}

.progress_box {
  width: calc(100% - 2rem);
  height: 2.75rem;
  background-color: #f7fafd;
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
  padding: 0 1rem;
  color: #b6becc;
  font-size: 0.9375rem;
  line-height: 2.75rem;
}
.progress_box .omit {
  line-height: 2.25rem;
}
.number {
  display: flex;
  align-items: center;
}
.number > img {
  width: 0.9375rem;
  height: 0.9375rem;
}
.number > div {
  margin: 0px 0.5625rem;
}

.gap {
  width: calc(100%);
  height: 0.625rem;
  background-color: #f7fafd;
}
.xian {
  width: calc(100% - 2rem);
  height: 0.0625rem;
  background-color: #e7ecf5;
  margin: 0 auto;
}
.area_box {
  background-color: #fff;
  line-height: 20px;
}

.flex_box {
  width: calc(100% - 2rem);
  background-color: #fff;
  padding: 1rem;
  font-weight: 500;
  font-size: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* margin-bottom: 0.625rem; */
}
.flex_box span {
  color: #e92121;
}
.flex_box input {
  border: none;
  font-size: 1rem;
  text-align: right;
  outline: none;
}
.address_box {
  background-color: #fff;
  margin-top: 0.625rem;
  margin-bottom: 3.75rem;
}
.add-info {
  margin: 0rem 0.9375rem;
}

.add-info-flex {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e7ecf5;
}

.add-info-flex .name {
  width: 5rem;
  font-size: 1rem;
}

.add-info-flex input {
  width: calc(100% - 5rem);
  border: none;
  padding: 0.3125rem;
  text-align: right;
  font-size: 1rem;
}
.next_box {
  width: calc(100% - 2rem);
  height: 2.75rem;
  padding: 0 1rem;
  position: fixed;
  bottom: 10px;
}
.next_box > div {
  background: linear-gradient(90deg, #448eff 0%, #66a3ff 100%);
  border-radius: 3px;
  height: 100%;
  width: 100%;
  text-align: center;
  line-height: 2.75rem;
  color: #fff;
}
input:disabled {
  background-color: #fff;
  opacity: 1;
}
.content_box {
  width: calc(100% - 2rem);
  padding: 0 1rem;
  display: flex;
  align-items: center;
  /* justify-content: space-around; */
  flex-flow: wrap;
}
.content_box .li {
  /* width: 59px; */
  padding: 0 0.625rem;
  height: 1.875rem;
  background: #f3f7fb;
  border-radius: 0.3125rem;
  text-align: center;
  line-height: 1.875rem;
  margin: 0.3125rem;
  font-size: 0.9375rem;
  color: #3f4551;
}
.active {
  background-color: #448eff !important;
  color: #fff !important;
}
.main_title {
  display: flex;
  align-items: center;
  height: 3.125rem;
  font-size: 17px;
  font-family: PingFang SC;
  font-weight: bold;
  /* margin-bottom: 1.1875rem; */
}

.main_title > span {
  width: 0.1875rem;
  height: 0.9375rem;
  background: rgba(90, 173, 251, 1);
  border-radius: 0.125rem;
  margin-right: 0.75rem;
}
</style>
<style >
.vux-cell-box:not(:first-child):before {
  display: none;
}
.weui-textarea {
  width: calc(100% - 2rem) !important;
  background-color: #f7fafd;
  padding: 1rem;
}
</style>
